<template>
  <div class="device">
    <el-page-header @back="goBack" :content="title"> </el-page-header>
    <div class="content">
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item
          label="名称"
          v-if="type == 1"
          prop="platformType"
          :rules="[
            {
              required: true,
              message: '请输入',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.platformType"
            placeholder="请选择"
            style="width: 400px"
            disabled
          >
            <el-option
              v-for="item in platformTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="装备模型名称"
          prop="templateName"
          :rules="[
            {
              required: true,
              message: '请输入',
              trigger: 'change',
            },
          ]"
        >
          <el-input class="ipt" v-model="form.templateName"></el-input>
        </el-form-item>
        <el-button @click="addattribute" type="primary">添加属性</el-button>
        <el-table
          :data="form.attributes"
          :height="maxHeight"
          size="mini"
          class="table-form"
        >
          <el-table-column label="属性名称">
            <template slot-scope="scope">
              <el-form-item
                :prop="'attributes.' + scope.$index + '.attributeName'"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                    trigger: 'change',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.attributeName"
                  placeholder="请输入单位"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="属性类型" prop="attributeValueType">
            <template slot-scope="scope">
              <el-form-item
                :prop="'attributes.' + scope.$index + '.attributeValueType'"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="scope.row.attributeValueType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop>
            <template slot-scope="scope">
              <el-form-item
                :prop="'attributes.' + scope.$index + '.unit'"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="scope.row.unit"
                  placeholder="请输入单位"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop width="64">
            <template slot-scope="scope">
              <el-button type="text" @click="cancelAttribute(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="btn">
      <el-button type="primary" @click="changeSure">确定</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>
<script>
import { editEquipTemplate } from "@/api/equip";
export default {
  props: {
    detailList: {
      type: Object,
      default: () => {},
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      maxHeight: "calc(100vh - 484px)",
      title: "编辑模型",
      form: {
        templateName: "",
        platformType: "",
        templateId: "",
        attributes: [],
      },
      data: this.detailList,
      platformTypeList: [
        {
          value: "0",
          label: "飞机平台",
          val: "BATTLE_PLAN",
        },
        {
          value: "1",
          label: "特种飞机平台",
          val: "SPECIAL_PLAN",
        },
        {
          value: "2",
          label: "舰艇平台",
          val: "SHIP",
        },
        {
          value: "3",
          label: "导弹平台",
          val: "MISSILE",
        },
      ],
      options: [
        {
          value: 0,
          label: "值",
        },
        {
          value: 1,
          label: "范围",
        },
      ],
    };
  },
  watch: {
    detailList() {
      this.data = this.detailList;
    },
  },
  created() {
    if (this.type != 1) {
      this.maxHeight = "calc(100vh - 422px)";
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    addattribute() {
      this.form.attributes.push({
        attributeName: "",
        attributeType: 0,
        attributeValueType: null,
        unit: "",
        attributeId: null,
      });
    },
    cancelAttribute(row) {
      this.form.attributes.splice(row.$index, 1);
    },
    getData() {
      this.form.templateName = this.data.templateName;
      this.form.templateId = this.data.templateId;
      this.form.platformType = this.platformTypeVal(this.data.platformType);
      this.data.templateattributes.forEach((item) => {
        this.form.attributes.push({
          attributeName: item.attributeName,
          attributeType: 0,
          attributeValueType: this.attributeValueType(item.attributeValueType),
          unit: item.unit,
          attributeId: item.attributeId,
        });
      });
    },
    attributeValueType(val) {
      switch (val) {
        case "NUMERIC":
          return 0;
        case "RANGE":
          return 1;
        default:
          return "";
      }
    },
    goBack() {
      this.$emit("goBack");
    },
    changeSure() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          editEquipTemplate(this.form)
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                this.$message.success(msg);
                this.$emit("changeEdit");
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    platformTypeVal(data) {
      for (let i = 0; i < this.platformTypeList.length; i++) {
        if (this.platformTypeList[i].val == data) {
          return this.platformTypeList[i].value;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  margin-top: 24px;
  text-align: right;
}
.content {
  margin-top: 24px;
}
:deep(.el-input).ipt {
  width: 400px;
}
</style>
